<template>
	<div>
		<div style="margin-bottom: 15px">
			<a-card style="width: 100%">
				<p>已选择数据项</p>
				<a-divider style="margin: 12px 0" />
				<div v-for="(item, index) in treeData" :key="index">
					<div v-for="(items, ind) in item.children" :key="ind">
						<div v-if="doesArrayContainId(Treedatas, items.id)">
							<p style="margin-bottom: 12px">
								{{ item.sourceName }}/{{ items.sourceName }}:
							</p>
							<div style="max-height: 150px; overflow: auto;display: flex;margin-bottom: 8px;flex-wrap: wrap;">
								<div
									v-for="(it, inss) in Treedatas"
									:key="inss"
								>
									<a-tag
										style="
											display: inline-block;
											padding: 0 10px;
											margin: 5px;
										"
										closable
										@close="log(it.id)"
										v-if="items.id == it.secondSourceId"
									>
										{{ it.sourceName}}
                                        </a-tag
									>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div
					style="
						display: flex;
						justify-content: flex-end;
						margin-top: 15px;
					"
				>
					<a-button type="primary" @click="Selection">
						确认选择
					</a-button>
				</div>
			</a-card>
		</div>
		<a-card style="width: 100%">
			<div>
				<div>
					<p style="display: inline-block; padding-top: 4px">
						{{ $t('app.setting.themecolor.dust.selecttype') }}：
					</p>
					<a-input-search
						:placeholder="$t('menu.form.basic-form')"
						enter-button
						style="width: 200px"
						@search="onSearch"
						@change="onChange"
					/>
				</div>
				<a-tree
					:tree-data="treeData"
					:default-expand-all="true"
					show-line
					show-icon
					@select="onSelect"
					checkable
					:expandedKeys="expandedKeys"
					@expand="onExpand"
					@check="onCheck"
					v-if="treeData.length > 0"
					style="height: 600px; overflow: auto"
				>
					<template
						#title="{
							id,
							sourceName,
							sourceSuperior,
							level,
							nodeStr,
							sourceNameEn,
							sourceDataType,
							sourceSensitivityLevel,
						}"
					>
						<div
							class="flex flex-row items-center py-2"
							v-if="sourceDataType == 1"
						>
							<div class="truncate pr-2">
								<div
									class="inline-block min-w-[132px] h-[32px] leading-[32px] text-center"
									@click="treePut(id, level)"
									:style="{
										'background-color':
											selectedNodeId === id
												? '#8adef8'
												: `rgba(36, 89, 229,${
														level == 1
															? 1
															: 1 - level * 0.2
												  } `,
										color: level < 3 ? '#fff' : '#2459E5',
									}"
								>
									{{ isLang ? sourceName : sourceNameEn }}
								</div>
							</div>
						</div>
						<div v-else>
							<div class="truncate pr-2">
								<div
									class="inline-block min-w-[132px] h-[32px] leading-[32px] text-center"
									@click="treePut(id, level)"
									:style="{
										'background-color':
											selectedNodeId === id
												? '#8adef8'
												: `rgba(36, 89, 229,${
														level == 1
															? 1
															: 1 - level * 0.2
												  } `,
										color: level < 3 ? '#fff' : '#2459E5',
										'margin-top': '8px',
										'text-align': 'justify',
									}"
								>
									{{ isLang ? sourceName : sourceNameEn }}
								</div>
							</div>
						</div>
					</template>
				</a-tree>
				<div
					style="
						display: flex;
						justify-content: flex-end;
						margin-top: 15px;
					"
				>
					<a-button
						type="primary"
						@click="Verify"
						style="margin-right: 15px"
					>
						确认
					</a-button>
					<a-button @click="Cancel"> 取消 </a-button>
				</div>
			</div>
		</a-card>
	</div>
</template>

<script>
import { sourceTree, sourceTreerpa } from '@/api/ytdg'
import { listToTree, listToTreerps } from '@/utils/util'
export default {
	props: {},
	computed: {},
	components: {},
	data() {
		return {
			// expandedKey: [], // 默认展开的节点的 key 值
			expandedKeys: [],
			switchStatus: true, // 初始状态为打开
			switchColor: '#1890ff', // 初始状态下的开关颜色
			defaultExpandAll: false,
			checked: true,
			loading: false,
			types: '',
			treeData: [],
			treeId: '',
			mateData: [],
			listData: [],
			visible: false,
			father: false,
			isLang: true,
			columns: [
				{
					title: '数据项',
					className: 'min-w-90p',
					dataIndex: 'SourceChildName',
					align: 'center',
				},
				{
					title: '敏感性分级',
					className: 'min-w-90p',
					dataIndex: 'SourceSensitivityLevel',
					align: 'center',
				},
				{
					title: '数据等级',
					className: 'min-w-90p',
					dataIndex: 'SourceDataLevel',
					align: 'center',
				},
				{
					title: '保护等级',
					className: 'min-w-90p',
					dataIndex: 'SourceProtectionLevel',
					align: 'center',
				},
			],
			ifLoading: false,
			selectedNodeId: null,
			selectedNode: null,
			Treedata: [],
			Treedatas: [],
		}
	},
	created() {
		this.init()
	},
	mounted() {
		// 语言切换监听
		let that = this
		window.addEventListener('setItemEvent', function (e) {
			if (e.key === 'lang') {
				that.lang = JSON.parse(e.value)
				if (that.lang == 'zh-EN') {
                    this.init()
					that.isLang = false
				} else {
                    this.init()
					that.isLang = true
				}
			}
		})
	},
	methods: {
		async init() {
			this.loading = true
			try {
				let lang = localStorage.getItem('lang')
				this.treeId = ''
				if (lang == '"zh-CN"') {
					this.isLang = true
					// const { data } = await sourceTree({ types: 1 })
					const { data } = await sourceTreerpa({})
					data.some((item) => {
						item.key = item.id
					})
					const listData = listToTreerps([...data], {
						id: 'id',
						pid: 'sourceSuperior',
						branch: 'children',
						name: 'sourceName',
					})
					this.Treedata = data
					this.treeData = listData
					this.expandedKeysOpenAll()
				} else {
					this.isLang = false
					const { data } = await sourceTreerpa({ types: 1 })
					data.some((item) => {
						item.key = item.id
					})
					const listData = listToTreerps([...data], {
						id: 'id',
						pid: 'sourceSuperior',
						branch: 'children',
						name: 'sourceNameEn',
					})
					this.Treedata = data
					this.treeData = listData
					this.expandedKeysOpenAll()
				}
			} catch (error) {
				this.$message.error(error)
			} finally {
				this.loading = false
			}
		},
		treePut(id, data) {},
		//展开tree
		onExpand(expandedKeys, { expanded: bool, node }) {
			this.expandedKeys = expandedKeys
		},
		//搜索发生变化时
		onChange(e) {
			if (e.data == null) {
				this.init()
			}
		},
		//展开所有数据
		expandedKeysOpenAll(data) {
			if (!data || data.length === 0) return
			let arr = Array.from(data)
			arr.forEach((item) => {
				this.expandedKeys.push(item.key)
				if (item.children && item.children.length > 0) {
					this.expandedKeysOpen(item.children)
				}
			})
		},
		//展开搜索的数据
		async expandedKeysOpen(data, value) {
			let arr = Array.from(data)
			arr.some((item) => {
				if (item.SourceName.indexOf(value) != -1) {
					if (!this.expandedKeys.includes(item.key)) {
						this.expandedKeys.push(item.key)
					}
					if (item.children && item.children.length > 0) {
						this.expandedKeysOpen(item.children, value)
					}
				} else {
					if (item.children && item.children.length > 0) {
						if (!this.expandedKeys.includes(item.key)) {
							this.expandedKeys.push(item.key)
						}
						this.expandedKeysOpen(item.children, value)
					}
				}
			})
		},
		// 搜索
		async onSearch(value) {
			try {
				if (this.isLang) {
					const { data } = await sourceTreerpa({
						types: 1,
						sourceName: value,
					})
					data.some((item) => {
						item.key = item.id
					})
					const listData = listToTreerps([...data], {
						id: 'id',
						pid: 'sourceSuperior',
						branch: 'children',
						name: 'sourceName',
					})
					this.treeData = listData
					this.expandedKeysOpen(this.treeData, value)
				} else {
					const { data } = await sourceTreerpa({
						types: 2,
						sourceNameEn: value,
					})
					data.some((item) => {
						item.key = item.id
					})
					const listData = listToTreerps([...data], {
						id: 'id',
						pid: 'sourceSuperior',
						branch: 'children',
						name: 'sourceName',
					})
					this.treeData = listData
					this.expandedKeysOpen(this.treeData, value)
				}
			} catch (error) {
				this.$message.error(error)
			} finally {
				this.loading = false
			}
		},
		//
		async onSelect(selectedKeys, info) {
		},
		onCheck(checkedKeys, e) {
			this.checkedKeys = checkedKeys
			this.Treedata.map((item) => {})
		},
		// 标签
		log(e) {
			let arr = []
			this.Treedatas.map((item) => {
				if (item.id == e) {
				} else {
					arr.push(item)
				}
			})
			this.Treedatas = arr
		},
		// 确认选择 退出
		Selection() {
			let arr = []
			this.Treedatas.map((item) => {
				arr.push(item.key)
			})
		},
		//确定选项
		Verify() {
			let arr = []
			this.Treedata.map((item) => {
				this.checkedKeys.map((item2) => {
					if (item.key == item2 && item.sourceDataType == 2) {
						arr.push(item)
					}
				})
			})
			this.Treedatas = arr
		},
		Cancel() {},
        // 判断数组中是否包含id
        doesArrayContainId(array, targetId) {
            return array.some(item => item.secondSourceId === targetId);
        }
	},
}
</script>

<style lang="less" scoped>
.title {
	display: flex;
	justify-content: space-between;
}

:deep(.ant-tree li ul) {
	padding-left: 50px !important;
}

:deep(.ant-tree li .ant-tree-node-content-wrapper) {
	width: calc(100% - 24px);
	height: 50px;

	&:hover {
		background: none;

		.action {
			display: flex;
		}
	}
}

:deep(.ant-tree li span.ant-tree-switcher) {
	margin-top: 12px;
}

:deep(.ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected) {
	background: transparent;
}

:deep(.ant-tree.ant-tree-show-line li:not(:last-child)::before) {
	border-left: 1px solid #2459e5;
}

:deep(.ant-tree-switcher) {
	font-size: 20px;
}

:deep(.ant-tree-switcher-line-icon) {
	color: #2459e5;
}

:deep(.ant-tree.ant-tree-show-line li:not(:last-child)::before) {
	top: 18px;
}

// 关闭样式
:deep(.ant-tree-switcher_close) {
	background: url(~@/assets/icons/close.svg) no-repeat center !important;

	i {
		display: none;
	}
}

//打开样式
:deep(.ant-tree-switcher_open) {
	background: url(~@/assets/icons/open.svg) no-repeat center !important;

	i {
		display: none;
	}
}

:deep(.ant-tree li span.ant-tree-switcher.ant-tree-switcher-noop) {
	position: relative;
	display: none;

	// background: url(~@/assets/icons/open.svg) no-repeat center !important;
	&::before {
		content: '112';
		background: #fff;
		position: absolute;
		height: 30px;
		width: 28px;
		top: 40px;
		left: 0;
	}

	i {
		display: none;
	}
}

:deep(.ant-tree li span.ant-tree-checkbox) {
	margin-top: 12px;
}

.big-box {
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999999;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
